<template>
    <div class="songmenu banxin">
        <!-- 标题 -->
        <div class="title tanxin">
            <div class="title_l tanxin">
                <h2>{{ name }}</h2>
                <button class="btn1" @click="isMenu=!isMenu" v-show="isMenu">收起分类<img src="../../assets/images/songmenu/上箭头.png" alt="" width="14px"></button>
                <button class="btn1" @click="isMenu=!isMenu" v-show="!isMenu">选择分类<img src="../../assets/images/songmenu/下箭头.png" alt="" width="14px"></button>
            </div>
            <div class="title_r">
                <!-- <button class="btn2" @click="isHot=!isHot" v-show="isHot">精品</button>
                <button class="btn2" @click="isHot=!isHot" v-show="!isHot">热门</button> -->
                <button class="btn2" @click="isHot=!isHot">{{ isHot ? '精品' : '热门' }}</button>
            </div>
        </div>
        <!-- 分类列表 -->
        <div class="menu_list" v-show="isMenu">
            <h3><a class="all" @click="goAll">全部风格</a></h3>
            <div class="cat_list">
                <ul>
                    <li>语种：</li>
                    <li v-for="(item, index) in catList1" :key="index">
                        <span class="name" @click="Go(item)">{{ item.name }} </span>
                        <span class="line">|</span>
                    </li>
                </ul>
                <ul>
                    <li>风格：</li>
                    <li v-for="(item, index) in catList2" :key="index">
                        <span class="name" @click="Go(item)">{{ item.name }} </span>
                        <span class="line">|</span>
                    </li>
                </ul>
                <ul>
                    <li>场景：</li>
                    <li v-for="(item, index) in catList3" :key="index">
                        <span class="name" @click="Go(item)">{{ item.name }} </span>
                        <span class="line">|</span>
                    </li>
                </ul>
                <ul>
                    <li>情感：</li>
                    <li v-for="(item, index) in catList4" :key="index">
                        <span class="name" @click="Go(item)">{{ item.name }} </span>
                        <span class="line">|</span>
                    </li>
                </ul>
                <ul>
                    <li>主题：</li>
                    <li v-for="(item, index) in catList5" :key="index">
                        <span class="name" @click="Go(item)">{{ item.name }} </span>
                        <span class="line">|</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 歌单列表 -->
        <div class="song_list">
            <!-- 热门歌单列表 -->
            <div class="hot_list" v-show="isHot">
                <HotList :hotlist="HotList" />
            </div>
            <!-- 精品歌单列表 -->
            <div class="highquality_list" v-show="!isHot">
                <LoadMore :bigarr="HighqualityList" :size="10">
                   <HighqualityList slot-scope="scope" :highqualitylist="scope.samllarr" />
                </LoadMore>
            </div>
            <!-- <HighqualityList :highqualitylist="HighqualityList" /> -->
        </div>
        <!-- 分页列表 -->
        <div class="select_list">
            <ul class="select tanxin">
                <li @click="upFn" :class="{'active': navActive==0}">上一页</li>
                <li v-for="(item, index) in number" :key="index" :class="{'active':item == $route.query.offset / 50 + 1 }" @click="Select(item)">{{ item }}</li>
                <li @click="nextFn" :class="{'active': navActive==1}">下一页</li>
            </ul>
        </div>
    </div>
</template>

<script>
import HotList from "../Playlist/HotList.vue";
import HighqualityList from "../Playlist/HighqualityList.vue";
import { SongMenuApi, SongListApi, HighqualityListApi } from "@/request/api";
export default {
    data () {
        return {
            MenuList: "",
            HotList: "",
            HighqualityList: "",
            isMenu: false,
            isHot: true,
            name: this.cat,
            catList1: [],
            catList2: [],
            catList3: [],
            catList4: [],
            catList5: [],
            number: [1,2,3,4,5,6,7,8,9,10],
            navActive: 0,
        }
    },
    components: {
        HotList,
        HighqualityList,
    },
    computed: {
       cat() {
            if (this.$route.query.cat == undefined) return "全部";
            return this.$route.query.cat;
        },
        offset() {
            if (this.$route.query.cat == undefined) return 0;
            return this.$route.query.offset;
        }
    },
    created() {
        // 获取歌单标签
        SongMenuApi().then((res) => {
            // console.log(res);
            this.MenuList = res.data.tags;
            this.catList1 = this.MenuList.filter(item=>{
                return item.category == 0
            });
            this.catList2 = this.MenuList.filter(item=>{
                return item.category == 1
            });
            this.catList3 = this.MenuList.filter(item=>{
                return item.category == 2
            });
            this.catList4 = this.MenuList.filter(item=>{
                return item.category == 3
            });
            this.catList5 = this.MenuList.filter(item=>{
                return item.category == 4
            });
        });
        // 获取热门歌单
        SongListApi({
            cat: this.cat,
            offset: this.offset
        }).then((res) => {     
            // console.log(res);
            this.HotList = res.data.playlists;
            this.name = res.data.cat;
        });
        // 获取精品歌单
        HighqualityListApi({
            cat: this.cat,
            offset: this.offset
        }).then((res) => {     
            // console.log(res);
            this.HighqualityList = res.data.playlists;
        });
    },
    methods: {
        Go(item) {
            this.$router.push({
                path: "/discover/songmenu",
                query: {
                    cat: item.name,
                    offset: 0,
                },
            });
            this.$router.go(0);
        },
        goAll() {
            this.$router.push({
                path: "/discover/songmenu",
                query: {
                    cat: "全部",
                    offset: 0,
                },
            });
            this.$router.go(0);
        },
        Select(item) {
            this.$router.push({
                path: "/discover/songmenu",
                query: {
                    cat: this.cat,
                    offset: (item-1)*50,
                }
            });
            this.$router.go(0);
        },
        upFn() {
            this.navActive = 0;
            this.$router.push({
                path: "/discover/songmenu",
                query: {
                    cat: this.cat,
                    offset: (this.offset/50 - 1)*50,
                }
            });
            this.$router.go(0);
        },
        nextFn() {
            this.navActive = 1;
            this.$router.push({
                path: "/discover/songmenu",
                query: {
                    cat: this.cat,
                    offset: (this.offset/50 + 1)*50,
                }
            })
            this.$router.go(0);
        }
    },
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.songmenu {
    width: 900px;
    border: 1px solid #d3d3d3;
    border-top: none;
    background-color: #fff;
    padding: 40px;
    .title {
        height: 35px;
        border-bottom: 2px solid @red;
        display: flex;
        align-items: center;
        font-size: 12px;
        .title_l {
            margin-bottom: 20px;
            h2 {
                line-height: 35px;
                font-size: 24px;
            }
            .btn1 {
                cursor: pointer;
                color: @black;
                background: linear-gradient(#fff, #F2F2F2);
                border: 2px solid #d3d3d3;
                border-radius: 5px;
                margin: 0 15px;
                padding: 0 10px;
                line-height: 30px;
                text-align: center;
                img {
                    margin: 0 0 0 5px;
                }
                &:hover {
                    background: #fff;
                }
            }
        }
        .title_r {
            margin-bottom: 20px;
            .btn2 {
                width: 50px;
                line-height: 30px;
                color: #fff;
                background: linear-gradient(#D20C0D, #9D0707);
                border: 2px solid #9D0707;
                border-radius: 5px;
                text-align: center;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
    }
    .menu_list {
        padding-bottom: 5px;
        border-bottom: 2px solid #e6e6e6;
        h3 {
            padding: 10px 0;
            .all {
                width: 75px;
                height: 26px;
                display: block;
                line-height: 26px;
                font-size: 12px;
                text-align: center;
                color: #333;
                background: url("@/assets/images/public/button.png") no-repeat 0 -64px;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
        .cat_list {
            ul {
                flex-wrap: wrap;
                display: flex;
                justify-content: flex-start !important;
                li {
                    height: 20px;
                    line-height: 20px;
                    margin: 5px 0;
                    &:nth-of-type(8n) {
                        margin-right: 0;
                    }
                    &:first-of-type {
                        font-size: 12px;
                        color: #333;
                        font-weight: bold;
                        padding: 0 10px 0 0;
                    }
                    .name {
                        font-size: 12px;
                        color: #333;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                    .line {
                        font-size: 12px;
                        color: #D8D8D8;
                        margin: 0 10px;
                    }
                }
            }
        }
    }
    .select_list {
        .select {
            display: flex;
            justify-content: center !important;
            margin: 20px;
            li {
                width: 21px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                font-size: 14px;
                color: #333;
                border: 1px #cacaca solid;
                border-radius: 2px;
                margin: 0 5px;
                &:hover {
                    cursor: pointer;
                    border: 1px #333 solid;
                }
                &:first-of-type {
                    width: 90px;
                }
                &:last-of-type {
                    width: 90px;
                }
            }
            .active {
                background: #c20c0c;
                // background: @red;
                border-radius: 2px;
                color: #fff;
            }
        }
    }
}
</style>